<template>
    <div>
        <h1>会员列表年龄区间查询</h1>
        <input type="number" v-model="datapsstring.minstring" placeholder="最小年龄">-
        <input type="number" v-model="datapsstring.maxstring" placeholder="最大年龄">
        <input type="button" value="查询" @click="querydata">
        <table class="table">
            <thead>
                <tr>
                    <td>id</td>
                    <td>name</td>
                    <td>age</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="d in datalist">
                    <td>{{ d.id }}</td>
                    <td>{{ d.name }}</td>
                    <td>{{ d.age }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">

import axios from 'axios';
import { ref,onMounted } from 'vue';

onMounted(()=>{
    getdata();
})

const datapsstring = ref({
    minstring:'',  //最小年龄字符串
    maxstring:'',  //最大年龄字符串
})


//查询
const querydata=()=>{
    //把字符串保存到数字里
    dataps.value.min = datapsstring.value.minstring==''?0: datapsstring.value.minstring;
    dataps.value.max = datapsstring.value.maxstring==''?0:datapsstring.value.maxstring;
    getdata();
}

const dataps = ref({
    min:0,  //最小年龄
    max:0,  //最大年龄
})
const datalist=ref([
  {
    "id": 0,
    "name": "string",
    "password": "string",
    "age": 0,
    "sex": 0,
    "birthday": "2025-05-13T08:12:54.342Z",
    "houbbyCount": 0,
    "houbbyString": "string",
    "start": true,
    "isDelete": true,
    "img": "string",
    "memberLevelId": 0,
    "createData": "2025-05-13T08:12:54.342Z"
  }
])
const getdata=()=>{
    axios.get("/api/Member/GetMembersWhereAge",{params:dataps.value}).then(res=>{
        datalist.value = res.data;

        debugger
    })
}

</script>

<style scoped>

</style>